<!--
 * @Author: yuanweijiang
 * @Date: 2024-01-03 14:19:33
 * @LastEditors: yuanweijiang
-->
<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef" class="flex items-center">
				<el-form-item prop="layerName">
					<el-input placeholder="请输入图层ID" clearable style="max-width: 180px" v-model="state.queryForm.layerName" />
				</el-form-item>
				<el-form-item prop="layerNameCh">
					<el-input placeholder="请输入图层名称" clearable style="max-width: 180px" v-model="state.queryForm.layerNameCh" />
				</el-form-item>
				<el-form-item>
					<el-button @click="query" class="ml10" icon="search" type="primary"> 查询 </el-button>
					<el-button icon="Refresh" @click="resetQuery">重置</el-button>
				</el-form-item>
				<div class="absolute right-8">
					<el-form-item>
						<el-button @click="openLayerDialog('add')" class="ml10" icon="CirclePlus" type="primary"> 创建图层 </el-button>
					</el-form-item>
				</div>
			</el-form>
			<el-table
				ref="tableRef"
				v-loading="state.loading"
				:data="state.dataList"
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle?.headerCellStyle"
				@filter-change="filterChange"
			>
				<el-table-column prop="dataType" label="类型" width="120" :filters="dataType" column-key="dataType" :filter-multiple="false" align="center">
					<template #default="scope">
						<div class="type-tag" :style="typeColor[Number(scope.row.dataType) - 1]">{{ filterDatatype(scope.row) }}</div>
					</template>
				</el-table-column>
				<el-table-column prop="serviceType" label="服务类型" show-overflow-tooltip>
					<template #default="scope">
						<el-tag :color="scope.row.serviceType == '2' ? '#E8EAF1' : '#DAF7C9'">{{
							scope.row.serviceType == '2' ? '静态服务' : '在线图层'
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="layerName" label="图层ID" show-overflow-tooltip />
				<el-table-column prop="layerNameCh" label="图层名称" show-overflow-tooltip />
				<el-table-column prop="fileName" label="文件名称" show-overflow-tooltip />
				<el-table-column prop="storeName" label="源文件名称" show-overflow-tooltip />
				<el-table-column prop="srs" label="坐标系参考系统" show-overflow-tooltip />
				<el-table-column prop="status" label="启用状态">
					<template #default="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="changeStatus(scope.row)" />
						<!-- <el-tag :type="scope.row.status ? 'success' : 'info'">{{ scope.row.status ? '启用' : '禁止' }}</el-tag> -->
					</template>
				</el-table-column>
				<el-table-column
					prop="projectNameCh"
					label="项目"
					:filters="projectOptions"
					show-overflow-tooltip
					column-key="wokeSpaceName"
					:filter-multiple="false"
				>
				</el-table-column>
				<el-table-column prop="layerRemarks" label="图层说明" show-overflow-tooltip />
				<el-table-column label="预览">
					<template #default="scope">
						<span @click="openLayerShow(scope.row.layerUrl)" class="jColor mr-4">查看</span>
						<span @click="copyText(scope.row.layerUrl)" class="jColor">地址</span>
					</template>
				</el-table-column>
				<el-table-column label="管理">
					<template #default="scope">
						<i class="iconfont icon-bianji1 jColor mr-4" @click="openLayerDialog('edit', scope.row)"></i>
						<i class="iconfont icon-shanchu jColor" @click="handleDelete(scope.row)"></i>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle"> </pagination>
		</div>
		<layerDialog @refresh="getDataList()" ref="layerDialogRef" />
	</div>
</template>

<script lang="ts" name="layerManagement" setup>
import { pageList, deleteGeoLayer, editStatus } from '/@/api/resource/layerManagement';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { getOptName } from '/@/utils/arrayOperation';
import commonFunction from '/@/utils/commonFunction';
import { useUserInfo } from '/@/stores/userInfo';
import { useI18n } from 'vue-i18n';
// 引入组件
const layerDialog = defineAsyncComponent(() => import('./components/layerManagement/layerDialog.vue'));
const { copyText } = commonFunction();
const { t } = useI18n();
// 定义变量内容
const tableRef = ref();
const queryRef = ref();
const layerDialogRef = ref();
const dataType = ref<any[]>([
	{ text: '矢量数据shp', value: 1 },
	{ text: '栅格数据', value: 2 },
	{ text: '3D数据', value: 3 },
]);
const typeColor = ref<any>([
	{ background: '#c1deff', color: '#499dff' },
	{ background: '#dad7ff', color: '#826EFF' },
	{ background: '#fde3c0', color: '#499dff' },
]);
const projectOptions = computed(() => {
	const userInfo = useUserInfo().userInfos.projectList;
	return userInfo.map((item) => ({
		text: item.label,
		value: item.value,
	}));
});
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: pageList,
	queryForm: {
		layerName: '',
		layerNameCh: '',
	},
	isPage: true,
});
function filterDatatype(row: any) {
	return dataType.value.find((item) => item.value == row.dataType).text;
}
const { getDataList, tableStyle, currentChangeHandle, sizeChangeHandle } = useTable(state);

// 搜索事件
const query = () => {
	state.dataList = [];
	getDataList();
};

// 清空搜索条件
const resetQuery = () => {
	queryRef.value.resetFields();
	state.dataList = [];
	getDataList();
};
async function changeStatus(row: any) {
	await editStatus({
		layerManagerId: row.layerManagerId,
		nameSpace: row.nameSpace,
		storeName: row.storeName,
		layerName: row.layerName,
		status: row.status,
		serviceType: row.serviceType,
	});
	useMessage().success('修改成功');
	getDataList();
}
// 查看图层
const openLayerShow = (layerUrl: any) => {
	window.open(layerUrl, '_blank');
};

// 打开图层弹窗
const openLayerDialog = async (type?: string, row?: any) => {
	layerDialogRef.value.openDialog(type, row);
};

//表格筛选
const filterChange = (filter) => {
	if (filter['dataType']) {
		state.queryForm.dataType = filter.dataType.join(',');
		getDataList();
	} else if (filter['wokeSpaceName']) {
		state.queryForm.wokeSpaceName = filter.wokeSpaceName.join(',');
		getDataList();
	}
};

// 删除操作
const handleDelete = async (row: any) => {
	try {
		await useMessageBox().confirm(t('common.delConfirmText'));
	} catch {
		return;
	}

	try {
		await deleteGeoLayer({
			layerName: row.layerName,
			dataType: row.dataType,
			wokeSpaceName: row.nameSpace,
			serviceType: row.serviceType,
			layerManagerId: row.layerManagerId,
		});
		getDataList();
		useMessage().success(t('common.delSuccessText'));
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};
</script>

<style lang="scss" scoped>
:deep(.el-input.is-disabled .el-input__wrapper) {
	background-color: #ffffff;
}
.type-tag {
	// min-width: 72px;
	padding: 0px 4px;
}
</style>
